<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    :close-on-click-modal="false"
    @closeDialog="handleClose"
  >
    <div class="main" v-loading="loading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled" >
        <el-row>
          <el-col :span="24">
            <el-form-item label="管辖区域：" prop="areaId">
              <el-select v-model="ruleForm.areaId" filterable placeholder="请选择" @change="areaIdChange">
                <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="行业：" prop="parentId">
              <el-select placeholder="请选择" v-model="ruleForm.parentId" @change="parentChange">
                <el-option v-for="item in typeLs2" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="子行业：" prop="childShopType">
              <el-select placeholder="请选择" multiple v-model="ruleForm.childShopType" @change="parentChange2">
                <el-option v-for="item in typeLs3" :key="item.id" :label="item.value" :value="item">
                </el-option>
              </el-select>
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="费率区间：">
              <div class="list_start">
                <el-form-item label="" prop="rateRangeStart" label-width="0">
                  <el-input v-model="ruleForm.rateRangeStart" placeholder="请输入"></el-input>
                </el-form-item>
                <span class="heng">-</span>
                <el-form-item label="" prop="rateRangeEnd" label-width="0">
                  <el-input v-model="ruleForm.rateRangeEnd" placeholder="请输入"></el-input>
                </el-form-item>
                <span style="margin-left: 10px;">%</span>
              </div>
            </el-form-item> 
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="button_box">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="AgreeLoading"
        @click="submitForm('ruleForm')"
      >确认提交</el-button>
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  addIndustry,
  editIndustry,
  getDetail,
  limitshopTypeList
} from "@/api/setting/commissionManagement";
import {
  userAreaSelect
} from "@/api/common"
export default {
  components: {
    Loading,
  },
  props: {
    pathType: String,
    id: String,
    visible: Boolean,
  },
  data() {
    var checkRateRangeStart = (rule, value, callback) => {
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else {
        return callback();
      }
      
    };
    var checkRateRangeEnd = (rule, value, callback) => {
      var rateRangeStart = parseFloat(this.ruleForm.rateRangeStart)
      var value = parseFloat(value)
      console.log('this.twoForm.assistancePO.guaranteeAmount',)
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else if ( rateRangeStart > value ) {
        return callback(new Error("不能低于起始值"));
      }else {
        return callback();
      }
    };
    
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "新增标签",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      optionsArea: [],//区域数组
      typeLs2: [],
      typeLs3: [],
      areaIdTwo: '',
      ruleForm: {
        id: '',
        areaId: '',//区域id
        childShopType: [],//子店铺行业类型数组
        parentId: '',//
        parentName: '',//
        rateRangeEnd: '',//
        rateRangeStart: '',//
      },
      rules: {
        areaId: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        parentId: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        childShopType: [
          { required: true,message: '请选择',trigger: ["change"]}
        ],
        rateRangeStart: [
          {validator:checkRateRangeStart ,required: true,trigger: ["bulr","change"]}
        ],
        rateRangeEnd: [
          {  validator: checkRateRangeEnd,required: true,trigger: ["bulr","change"]}
        ],
      },
      
    };
  },
  computed: {},
  created() {
    console.log('')
    if(this.pathType == 'edit'){
      this.title = '编辑费率区间'
      this.getinfo()
    }else{
      this.title = '新增费率区间'

    }
    this.getAreaList()

  },
  mounted() {
   
    
  },
  computed: {},
  methods: {
    //查询区域下拉框
    getAreaList() { 
      userAreaSelect().then(res => {
        this.optionsArea = res.result
      }).catch(() => {})
    },
    //获取详情
    getinfo(){
      var id = this.id
      getDetail(id).then(res => {
          this.ruleForm = res.result
          this.getlimitshopTypeList(this.ruleForm.areaId)
          this.getlimitshopTypeListTow(this.ruleForm.areaId) 

      })
    },

    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
   
    areaIdChange(id){ //区域选择
      console.log(id)
      this.getlimitshopTypeList(id)
    },

    getlimitshopTypeList(id) {
        //新增或者编辑时查询店铺行业(一级)
        //shopTypeList
        let params = {
          areaId: id
        }
        this.areaIdTwo = id
        // this.loading = true;
        limitshopTypeList(params)
          .then((res) => {
            this.typeLs2 = res.result;
          })
          .finally(() => {
            // this.loading = false;
          });
      },
    getlimitshopTypeListTow(areaId) {
        //新增或者编辑时查询店铺行业(二级)
        let params = {
          areaId: areaId,
          parentId: this.ruleForm.parentId,
          id: this.ruleForm.id,
        };
        limitshopTypeList(params)
          .then((res) => {
            this.typeLs3 = res.result;
          })
          .finally(() => {
            this.loading = false;
          });
      },
    parentChange(id) {
      //一级
      console.log(id);
      var list = this.typeLs2
      list.forEach(item => {
        if(item.id == id){
          this.ruleForm.parentId = item.id;
          this.ruleForm.parentName = item.value;
        }
      });
      this.ruleForm.childShopType = [];
      this.getlimitshopTypeListTow(this.areaIdTwo);
    },
    parentChange2(item) {
      //二级
      console.log(item);
      //   this.parentId = item.id
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.AgreeLoading = true
          var data = {
            ...this.ruleForm
          }
          if(this.pathType == 'add'){
            addIndustry(data).then(res => {
              this.handleClose()
              this.$message.success('创建成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }else if(this.pathType == 'edit'){
            editIndustry(data).then(res => {
              this.handleClose()
              this.$message.success('创建成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editForm(formName, status) {
      //编辑确定
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.el-select{
  width: 100%;
}
.main {
  padding: 20px 20px;
}
.richText {
  border: 1px solid #ccc;
  line-height: normal;
}
.stockNum{
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.button_box{
  display: flex;
  justify-content: center;
}
.equityImgBox{
  width: 100%;
  display: flex;
  justify-content: center;
}
.equityImgBox img{
  width: 120px;
  height: 120px;
}
.el-form-item{
  margin-bottom: 32px;
}
.list_start{
  display: flex;
  justify-content: flex-start;
  .heng{
    margin: 0 10px;
  }
  .el-input{
    width: 180px;
  }
}
</style>
